<template>
  <div class="new">
    <el-button text @click="show = true"> 新增 </el-button>
    <el-dialog v-model="show" title="新增群组">
      <el-form :model="form">
        <el-form-item label="" label-width="140px">
          <el-input v-model="input" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="aaa"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

//新增
const input = ref("");

const show = ref(false);

const from = reactive({
  username: "",
});
const emit = defineEmits(["Newww"]);
const aaa = () => {
  from.username = input.value;
  show.value = false;
  input.value = "";
  emit("Newww", from);
};
</script>


<style>
/* 新增弹窗 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
